<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:c="http://java.sun.com/jstl/core"
        >

<ui:component>
    <style type="text/css">
        .oneImage {
            padding: 10px 0;
            width: 150px;
            vertical-align: middle;
            text-align: center;
        }

        .albumPanel {
            background: #F7F7F7;
        }

        table.noborder td {
            border: 0px;
        }

        .top {
            vertical-align: top;
        }

        .bootomRight {
            float: right;
        }

        .a1 A:link {
            text-decoration: none;
            color: blue;

        }

        .a1 A:visited {
            text-decoration: none;

        }

        .a1 A:active {
            text-decoration: none;
            color: yellow;
        }

        .a1 A:hover {
            text-decoration: none;
            background: #20205e;
            font-style: italic;
            color: white;
        }
    </style>

    <a4j:outputPanel layout="block" style="width:100%; margin-top:10px; margin-bottom:10px">
        <h:outputLabel style="color:gray" value="Album"/>
        <h:outputLabel style="color:black;" value="#{photosSessionBean.focusedAlbum.name}"/>
    </a4j:outputPanel>

    <h:panelGrid rendered="#{not empty photosBean.albumPictures}"
                 style="width: 100%" columns="1" rowClasses="top, bootomRight">
        <rich:panel style="width:100%" bodyClass="rich-laguna-panel-no-header, albumPanel">
            <h:panelGrid rendered="#{not empty photosBean.albumPictures}" columns="4"
                         columnClasses="oneImage, oneImage, oneImage, oneImage">
                <c:forEach items="#{photosBean.albumPictures}" var="picture">
                    <a4j:outputPanel onclick="detailedPictureView#{picture.id}();"
                                     styleClass="albumPanel"
                                     style="border:none"
                            >
                        <a4j:jsFunction name="detailedPictureView#{picture.id}"
                                        action="#{photosBean.detailedPictureView}"
                                        reRender="photosProfileTabPanel, requestRichPanel">
                            <f:setPropertyActionListener value="viewOnePhoto"
                                                         target="#{photosSessionBean.pageViewKey}"/>
                            <f:setPropertyActionListener value="#{picture}"
                                                         target="#{photosSessionBean.currentViewPicture}"/>
                        </a4j:jsFunction>
                        <a4j:outputPanel layout="block" style="background:transparent"
                                >
                            <a4j:mediaOutput onmouseover="this.style.border='1px solid #3B5998'"
                                             onmouseout="this.style.border='1px solid #CCCCCC'"
                                             element="img" mimeType="image/bmp"
                                             createContent="#{photosBean.paint}" value="photo_#{picture.id}"
                                             style="resize:both; max-width:100px; max-height:100px; padding:4px;
                                              border:1px solid #CCCCCC; background:white"
                                             cacheable="false">
                                <f:param value="#{imageSliderBean.timeStamp}" name="time"/>
                            </a4j:mediaOutput>
                        </a4j:outputPanel>


                    </a4j:outputPanel>
                </c:forEach>
            </h:panelGrid>
        </rich:panel>
        <a4j:outputPanel rendered="#{profile.myProfilePage}" style="float:right;">
            <h:panelGrid styleClass="a1" columns="1">

                <a4j:commandLink value="#{resources.addPictureToAlbumText}"
                                 action="#{photosBean.prepareToEditAlbum}"
                                 reRender="photosProfileTabPanel, editPanelCurrentlyView"
                        >
                    <f:setPropertyActionListener value="editPhotos"
                                                 target="#{photosSessionBean.pageViewKey}"/>
                </a4j:commandLink>
                <rich:separator height="1px" width="100%"/>
                <a4j:commandLink rendered="#{photosSessionBean.focusedAlbum.canDelete}"
                                 value="#{resources.editAlbumLabel} #{photosSessionBean.focusedAlbum.name}"
                                 action="#{photosBean.prepareToEditAlbum}"
                                 reRender="addNewAlbumPanel"
                                 oncomplete="Richfaces.showModalPanel('addNewAlbumPanel');"
                                 limitToList="true"/>
                <rich:separator rendered="#{photosSessionBean.focusedAlbum.canDelete}"
                                height="1px" width="100%"/>
                <a4j:commandLink rendered="#{photosSessionBean.focusedAlbum.canDelete}"
                                 value="#{resources.deleteAlbumLabel} #{photosSessionBean.focusedAlbum.name}"
                                 action="#{photosBean.prepareToDeleteAlbum}"
                                 reRender="deleteAlbumPanel"
                                 oncomplete="Richfaces.showModalPanel('deleteAlbumPanel');"
                                 limitToList="true"/>
                <rich:separator rendered="#{photosSessionBean.focusedAlbum.canDelete}"
                                height="1px" width="100%"/>
            </h:panelGrid>
        </a4j:outputPanel>
    </h:panelGrid>


    <rich:panel rendered="#{empty photosBean.albumPictures and profile.myProfilePage}"
                bodyClass="rich-laguna-panel-no-header">
        <h:outputLabel style="color:gray;"
                       value="Album #{photosSessionBean.focusedAlbum.name} is empty. You can ">
            <a4j:commandLink value="upload" reRender="photosProfileTabPanel, editPanelCurrentlyView">
                <f:setPropertyActionListener value="editPhotos"
                                             target="#{photosSessionBean.pageViewKey}"/>
            </a4j:commandLink>
            <h:outputLabel value=" some picture "/>
        </h:outputLabel>
        <h:outputLabel style="color:gray;" value="Also you can ">
            <a4j:commandLink value="remove" action="#{photosBean.prepareToDeleteAlbum}"
                             reRender="deleteAlbumPanel, editPanelCurrentlyView"
                             oncomplete="Richfaces.showModalPanel('deleteAlbumPanel');"
                             limitToList="true"/>
            <h:outputLabel value=" album"/>
        </h:outputLabel>
    </rich:panel>
    <rich:panel rendered="#{not profile.myProfilePage and empty photosBean.albumPictures}"
                bodyClass="rich-laguna-panel-no-header">
        <h:outputLabel style="color:gray;" value="Album #{photosSessionBean.focusedAlbum.name} is empty."/>
    </rich:panel>


    <!--<f:facet name="footer">-->
    <!--<rich:datascroller></rich:datascroller>-->
    <!--</f:facet>-->
    <!--</rich:dataGrid>-->


</ui:component>


</html>
